<template>
  <div class="app-container">
    <el-form ref="form" :model="formData" label-width="120px">
      <el-divider>扫码设置</el-divider>
      <!-- <el-form-item label="模式">
        <el-radio-group v-model="formData.type">
          <el-radio :label="1">小票模式</el-radio>
          <el-radio :label="2">客显模式</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item label="COM口">
        <el-select v-model="formData.scanTypes" placeholder="请选择COM口">
          <el-option
            v-for="(item, index) in com"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="波特率">
        <el-select v-model="formData.baud" placeholder="请选择波特率">
          <el-option
            v-for="(item, index) in baud"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="扫码超时时间（毫秒）" label-width="100">
        <el-input-number
          v-model="formData.collNum"
          :min="1"
          :max="100"
        ></el-input-number>
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="resetting">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Message } from "element-ui";
const ipcRenderer = require("electron").ipcRenderer;

const form = ref();
const formData = ref({
  type: 1,
  scanTypes: 0,
  baud: 0,
});

const com = ref([
  {
    value: 0,
    label: "请选择COM口",
  },
  {
    value: 1,
    label: "COM1",
  },
  {
    value: 2,
    label: "COM2",
  },
  {
    value: 3,
    label: "COM3",
  },
  {
    value: 4,
    label: "COM4",
  },
  {
    value: 5,
    label: "COM5",
  },
  {
    value: 6,
    label: "COM6",
  },
]);

const baud = ref([
  {
    value: 0,
    label: "请选择波特率",
  },
  {
    value: 1,
    label: "110",
  },
  {
    value: 2,
    label: "300",
  },
  {
    value: 3,
    label: "1200",
  },
  {
    value: 4,
    label: "2400",
  },
  {
    value: 5,
    label: "4800",
  },
  {
    value: 6,
    label: "9600",
  },
  {
    value: 7,
    label: "19200",
  },
  {
    value: 8,
    label: "38400",
  },
  {
    value: 9,
    label: "57600",
  },
  {
    value: 10,
    label: "115200",
  },
  {
    value: 11,
    label: "230400",
  },
  {
    value: 12,
    label: "460800",
  },
  {
    value: 13,
    label: "921600",
  },
]);

onMounted(() => {
  //获取配置
  if (JSON.parse(localStorage.getItem("scanSetup")) != null) {
    formData.value = JSON.parse(localStorage.getItem("scanSetup"));
  }

  ipcRenderer.on("update-msg", (event, age) => {
    console.log("update-msg", age);
    switch (age.state) {
      case 6:
        let text = "";
        let regex = /^\d{0,2}/;
        let result = age.msg.match(regex)[0];
        if (result == 13) {
          text = "微信";
        } else if (result == 28) {
          text = "支付宝";
        }
        ipcRenderer.send("ck1", age.msg, text);
        break;
      default:
        break;
    }
  });
});

//保存
const onSubmit = () => {
  localStorage.setItem("scanSetup", JSON.stringify(formData.value));
  let val = "";
  let baudval = "";
  com.value.forEach((item) => {
    if (item.value == formData.value.scanTypes) {
      val = item.label;
    }
  });
  baud.value.forEach((item) => {
    if (item.value == formData.value.baud) {
      baudval = Number(item.label);
    }
  });

  // 给主进程发消息 打开串口
  // const data = ipcRenderer.sendSync("ck", val, baudval, formData.value.type);
  // console.log(data);

  // 向主进程synchronous-message发送消息，并接收返回结果
  // console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

  Message({
    message: "保存成功!",
    type: "success",
  });
  setTimeout(() => {
    location.reload();
  },500)
};

// 监听主进程主动发送过来的消息
ipcRenderer.on("ping", (e, data) => {
  console.log(data);
  // {"msg": "主进程主动给渲染进程发送的消息"}
});

//重置
const resetting = () => {
  formData.value = {
    scanTypes: 0,
    baud: 0,
  };
  Message({
    message: "重置成功!",
    type: "success",
  });
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

